<template>
	<view>
		<view class="title">{{topicData.title}}</view>
		<!--标题 -->
		<view class="head_box">
			<view class="head_image" @click.stop="getUser(item)">
				<image :src="topicData.portraitURL"></image>
				<!--头像-->
			</view>
			<view class="headcenter">
				<!-- <view class="head_name" @click.stop="getUser(item)">{{item.user.userName}}</view>
				<view class="head_time">{{renderTimeYMDHMS(item.postTime)}}</view> -->
				<view class="head_name" @click.stop="getUser(item)">{{topicData.nickname}}</view>
				<!--名字-->
				<view class="head_time">{{topicData.createTime}}</view>
				<!--时间-->
			</view>
		</view>
		<view class="content">
			<text>
				{{topicData.content}}
			</text>
		</view>
		<view v-if="topicData.picURLList === null">
		</view>
		<view v-if="topicData.picURLList !== null">
			<view class="dynamicimage" v-if="topicData.picURLList.length === 1">
				<image class="image" :src="pic" v-for="(pic, index) in topicData.picURLList" mode="aspectFill"
					@click="previewpic(pic, topicData.picURLList)" :key="index"></image>
			</view>
			<view class="dynamicimage2" v-if="topicData.picURLList.length === 2">
				<image class="image2" :src="pic" v-for="(pic, index) in topicData.picURLList" mode="aspectFill"
					@click="previewpic(pic, topicData.picURLList)" :key="index"></image>
			</view>
			<view class="dynamicimage4" v-if="topicData.picURLList.length === 4">
				<image class="image4" :src="pic" v-for="(pic, index) in topicData.picURLList" mode="aspectFill"
					@click="previewpic(pic, topicData.picURLList)" :key="index"></image>
			</view>
			<view class="dynamicimage3" v-if="topicData.picURLList.length === 3 || topicData.picURLList.length === 5 || topicData.picURLList.length === 6 || 
			topicData.picURLList.length === 7 || topicData.picURLList.length === 8 || topicData.picURLList.length === 9">
				<image class="image3" :src="pic" v-for="(pic, index) in topicData.picURLList" mode="aspectFill"
					@click="previewpic(pic, topicData.picURLList)" :key="index"></image>
			</view>
		</view>
		<view class="tagbox">
			<!-- <view class="tag" v-for="(a, index) in item.postTag" :key="index"
				:style="{'background-color':colorlists[index]}">
				#{{a}}
			</view> -->

			<view class="tag" v-for="(a,index) in topicData.tag" :key="index" :style="{'background-color':colorlists[index]}">
				{{a}}
			</view>
		</view>

		<view class="likecmt">
			<view class="likebox">
				<view @click.stop="likeNew(index)" hover-stay-time="1000">
					<image v-if="isLike == 0" src="../../static/likefalseicon.png"></image>
					<image v-if="isLike == 1" src="../../static/likeorcmt/liketrueicon.png"></image>
				</view>
				<text>{{topicData.thumpUp}}</text><!-- {{item.postLikeNum}} -->
			</view>
		</view>
		<view class="comment">
			<view class="text">评论：</view>
		</view>
		<view class="criticism" v-for="(cmditem,index) in topicData.commendList" :value="index">
			<!--这里数组要换掉-->
			<view class="headbox">
				<image :src="cmditem.portraitURL"></image>
				<!--头像-->
				<view class="namebox">{{cmditem.nickname}}</view>
				<!--用户名称-->
			</view>
			<view class="contentbox">
				<view class="text2">
					<text>{{cmditem.content}}</text>
				</view>
			</view>
		</view>

		<view style="height: 100rpx;"></view>
		<view class="input-box">
			<view class="textbox">
				<view class="text-mode">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" id="textMsg" />
					</view>
				</view>
			</view>
			<label for="textMsg">
				<view class="send" @tap="sendText">
					<view class="btn">
						发送
					</view>
				</view>
			</label>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) {
			var userId = getApp().globalData.userId
			this.userId = getApp().globalData.userId
			console.log(this.userId)
			this.topicId = option.topicId
			console.log(this.topicId)
			this.getTopicDetail(this.topicId)
		},
		data() {
			return {
				topicData: {},
				userId: "",
				topicId: 0,
				textMsg: "",
				content: "",
				title: "",
				testlist: [1, 2, 3, 4],
				photolist: [1, 2, 3, 4],
				isLike: 0,
				taglist: [1, 2],
				colorlists: [
					'rgb(243, 2, 168)',
					'rgb(16, 195, 195)',
					'rgb(84, 2, 255)',
					'hsl(12, 90%, 34%)',
					'hsl(138, 24%, 48%)',
					'rgb(232, 13, 131)',
					'hsl(0, 99%, 34%)',
					'rgb(226, 166, 198)',
					'hsl(278, 17%, 66%)',
					'rgb(234, 199, 12)',
					'blueviolet'
				],
				likenumber: 10,
				haveclick: false
			}
		},
		methods: {
			getTopicDetail(topicId) {
				uni.request({
				    url: this.baseurl + '/getTopicDetail/' + topicId,
					data: {
						userId: this.userId
					},
				    success: (res) => {
						this.topicData = res.data;
						console.log(res.data);
				    }
				});
			},
			previewpic(cind, clist) {
				// console.log(cind, clist);
				uni.previewImage({
					urls: clist,
					current: cind,
					indicator: 'default'
				});
			},
			likeNew(index) {
				if (this.isLike == 0) {
					this.isLike = 1;
					this.topicData.thumpUp++;
				} else {
					this.isLike = 0;
					this.topicData.thumpUp--;
				}
			},
			createpost() {
				console.log(this.title + "     " + this.content)
			},
			getUser(item) { //跳转到用户界面
				// if (item.user.userId === getApp().globalData.userId) {
				// 	uni.navigateTo({
				// 		url: "/pages/user/myhome"
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: "/pages/user/friendhome" +
				// 			"?userId=" +
				// 			item.user.userId
				// 	})
				// }
				// console.log('你点击了用户')
				uni.switchTab({
					url: "../user/UserMsg"
				})
			},
			//修改时间格式：年月日时分秒
			renderTimeYMDHMS(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000)
					.toISOString()
					.replace(/T/g, ' ')
					.replace(/\.[\d]{3}Z/, '')
			},
			sendText() {
				console.log(this.textMsg);
				this.postCmt(this.userId, parseInt(this.topicId), this.textMsg);
			},
			postCmt(userId, postId, postCmtCont) {
				if (postCmtCont == "") {
					uni.showToast({
						title: "评论不能为空",
						icon: "none",
						position: 'bottom',
					})
					return
				}
				if (this.haveclick === false) {
					this.haveclick = true;
					uni.showLoading({
						title: "加载中..."
					})
					uni.request({
						url: this.baseurl + '/comment',
						method: 'POST',
						header: {
							'content-type': "application/json",
						},
						data: {
							topicId: parseInt(this.topicId),
							commentusrId: this.userId,
							content: this.textMsg
						},
						success: (res) => {
							uni.hideLoading()
							console.log(res)
							//成功
							if (res.data.status == "success") {
								this.isBackRefresh = true
								this.auth_time = 1;
								var auth_timetimer = setInterval(() => {
									this.auth_time--;
									if (this.auth_time <= 0) {
										this.haveclick = false;
										clearInterval(auth_timetimer);
									}
								}, 1000);
								setTimeout(() => {
									// 服务端响应的 message 提示
									uni.showToast({
										title: "发送成功",
										icon: "none",
										position: 'bottom',
									})
									//延时关闭  加载中的 loading框
									uni.hideLoading()
								}, 1000)
								this.getTopicDetail(parseInt(this.topicId))
							} else {
								//不成功
								uni.hideLoading()
								this.auth_time = 1;
								var auth_timetimer = setInterval(() => {
									this.auth_time--;
									if (this.auth_time <= 0) {
										this.haveclick = false;
										clearInterval(auth_timetimer);
									}
								}, 1000);
								// 服务端响应的 message 提示
								setTimeout(() => {
									uni.showToast({
										title: "发送失败",
										icon: "none",
										position: 'bottom',
									})
									//延时关闭  加载中的 loading框
									uni.hideLoading()
								}, 1000)
							}
							this.textMsg = ''
						},
						fail: (res) => {
							this.auth_time = 1;
							var auth_timetimer = setInterval(() => {
								this.auth_time--;
								if (this.auth_time <= 0) {
									this.haveclick = false;
									clearInterval(auth_timetimer);
								}
							}, 1000);
							// 服务端响应的 message 提示
							setTimeout(() => {
								uni.showToast({
									title: "发送失败",
									icon: "none",
									position: 'bottom',
								})
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 1000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.title {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.head_box {
		display: flex;
		flex-direction: row;
		float: left;
		width: 100%;
		height: 140rpx;
		justify-content: space-between;
		align-items: center;
		position: relative;
		justify-content: flex-start;
		padding-left: 20rpx;

		//background-color: #007AFF;
		.head_image {
			//background-color: #2C405A;
			width: 100rpx;
			height: 100rpx;
			//overflow: hidden;
			margin-left: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.headcenter {
			display: flex;
			flex: 1;
			//background-color: #4CD964;
			height: 120rpx;
			flex-direction: column;
			width: 400rpx;
			margin-left: 10rpx;

			.head_name {
				//background-color: #FFFFFF;

				margin-top: 15rpx;
				font-size: 35rpx;
				color: #555555;
				//position: absolute;
				//left: 80rpx;
				font-weight: bold;
			}

			.head_time {
				//background-color: #FFFFFF;

				margin-top: 15rpx;
				font-size: 30rpx;
				color: #999999;
			}
		}
	}

	.content {
		//background-color: #FFFFFF;
		//background-color: #007111;
		//display: flex;
		width: 710rpx;
		font-size: 25rpx;
		justify-content: center;
		//align-items: center;
		color: #555555;
		margin-left: 20rpx;
	}

	.dynamicimage {
		display: flex;
		//background-color: #000000;
		flex-direction: row;
		//align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.image {

			align-items: center;
			height: 400rpx;
			width: 400rpx;
			border-radius: 10rpx;
		}
	}

	.dynamicimage2 {
		display: flex;
		//background-color: #000000;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.image2 {
			//background-color: #007AFF;
			align-items: center;
			height: 300rpx;
			width: 300rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
		}
	}

	.dynamicimage3 {
		display: flex;
		//background-color: #000000;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		//justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
		margin-top: 20rpx;
		margin-left: 15rpx;

		.image3 {
			//background-color: #007AFF;
			align-items: center;
			height: 200rpx;
			width: 200rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
			margin-top: 10rpx;
		}
	}


	.dynamicimage4 {
		display: flex;
		//background-color: #000000;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
		margin-top: 10rpx;

		.image4 {
			//background-color: #007AFF;
			margin-top: 10rpx;
			align-items: center;
			height: 300rpx;
			width: 300rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
		}
	}


	.tagbox {
		display: flex;
		flex-direction: row;
		height: 50rpx;
		width: 100%;
		//background-color: #007AFF;
		margin-top: 15rpx;
		justify-content: flex-start;
		align-items: center;

		.tag {
			display: flex;
			font-size: 20rpx;
			margin-left: 20rpx;
			padding-top: 5rpx;
			padding-bottom: 10rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			color: #FFFFFF;
			height: 30rpx;
			border-radius: 20rpx;
			//align-items: center;
			//width: 100rpx;
			text-align: center;
			text-justify: center;
		}
	}

	.likecmt {
		margin-top: 30rpx;
		//background-color: #007AFF;
		height: 60rpx;
		width: 100%;
		display: flex;
		//flex: 1;
		//width: 200rpx;
		//margin-left: 200rpx;
		justify-content: flex-end;

		.likebox {
			display: flex;
			flex-direction: row;
			//background-color: #333333;
			height: 100%;
			width: 120rpx;

			image {
				height: 50rpx;
				width: 50rpx;
			}

			text {
				margin-top: 5rpx;
			}
		}

		.cmtbox {
			display: flex;
			flex-direction: row;
			//background-color: #4CD964;
			height: 100%;
			width: 120rpx;
		}

		image {
			height: 50rpx;
			width: 50rpx;
		}

		text {
			margin-top: 5rpx;
		}
	}

	.comment {
		margin-top: 20rpx;
		//height: 70rpx;
		border-top: l00upx solid #555555;

		.text {
			margin-left: 20rpx;
			font-weight: bold;
		}
	}

	.criticism {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		border-top-style:solid;
		border-top:1rpx solid #F1F1F1;
		
		.headbox {
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				margin-left: 20rpx;
				height: 80rpx;
				width: 80rpx;
				border-radius: 100rpx;
			}

			.namebox {
				margin-left: 20rpx;
				color: #333333;
			}
		}

		.contentbox {
			margin-top: 20rpx;
			display: flex;

			//background-color: #007AFF;
			.text2 {
				display: flex;
				text{
					//background-color: #007AFF;
					width: 650rpx;
					margin-left: 50rpx;
				}
			}
		}

	}

	.input-box {
		width: 100%;
		min-height: 100upx;
		padding: 0 1%;
		background-color: #f2f2f2;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom: 0;

		.collect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			//background-color: #0000FF;
			width: 100rpx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: #909399;
			}

			&.active,
			&.active .yticon {
				color: #fa436a;
			}

			.icon-xiatubiao--copy {
				font-size: 45upx;
			}

			.icon-shoucang {
				font-size: 53upx;
			}
		}

		.send {
			//H5发送按钮左边距
			/* #ifdef H5 */
			margin-left: 20upx;
			/* #endif */
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			display: flex;
			align-items: center;

			.btn {
				width: 90upx;
				height: 56upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #B0E3FF;
				color: #fff;
				border-radius: 6upx;
				font-size: 24upx;
			}
		}

		.textbox {
			width: 100%;
			min-height: 70upx;
			margin-top: 15upx;

			.text-mode {
				width: 100%;
				min-height: 70upx;
				display: flex;
				background-color: #fff;
				border-radius: 40upx;

				.box {
					width: 100%;
					padding-left: 30upx;
					min-height: 70upx;
					display: flex;
					align-items: center;

					textarea {
						width: 100%;
					}
				}

				.em {
					flex-shrink: 0;
					width: 80upx;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
